<template>
  <div class="panel">
    <el-amap
      :center="center"
      :zoom="zoom"
      :map-style="mapStyle"
      :view-mode="viewMode"
      :rotation="rotation"
      :pitch="pitch"
    >
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="true" />

      <!-- 标记点 -->
      <el-amap-marker
        v-for="device in deviceData.devices"
        :key="device.id"
        :position="device.position"
        :content="createMarkerContent(device)"
        :offset="[-20, -20]"
        @mouseover="handleMarkerMouseover(device)"
        @mouseout="handleMarkerMouseout"
      />

      <!-- 信息窗体 -->
      <el-amap-info-window
        v-if="currentInfo"
        :position="currentInfo.position"
        :visible="infoWindowVisible"
        :content="createInfoWindowContent(currentInfo)"
        :offset="[0, -30]"
        :auto-move="false"
        @close="closeInfoWindow"
      />
    </el-amap>

    <div class="overlay-controls">
      <div class="status-info">
        <div class="info-item">
          <span class="label">摄像头：</span>
          <span class="value">在线 4/6</span>
        </div>
        <div class="info-item">
          <span class="label">传感器：</span>
          <span class="value">在线 12/15</span>
        </div>
        <div class="info-item">
          <span class="label">控制器：</span>
          <span class="value">在线 8/10</span>
        </div>
        <div class="info-item">
          <span class="label">告警：</span>
          <span class="value warning">3条</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ElAmap,
  ElAmapLayerSatellite,
  ElAmapMarker,
  ElAmapInfoWindow
} from '@vuemap/vue-amap'

const center = ref<[number, number]>([112.443001, 39.37686]);
const zoom = ref(16.3)
const mapStyle = ref('amap://styles/satellite')
const viewMode = ref('3D')
const rotation = ref(-3)
const pitch = ref(0)
const currentInfo = ref<any>(null)
const infoWindowVisible = ref(false)

// 模拟设备数据
const deviceData = {
  center: [112.447101, 39.37386],
  devices: [
    {
      id: 1,
      name: '摄像头1',
      type: 'camera',
      position: [112.444526, 39.375843],
      status: 'online',
      location: '温室1号东南角',
      model: 'HK-2000',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 2,
      name: '摄像头2',
      type: 'camera',
      position: [112.446526, 39.374843],
      status: 'warning',
      location: '温室1号西北角',
      model: 'HK-2000',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 3,
      name: '摄像头3',
      type: 'camera',
      position: [112.448526, 39.373843],
      status: 'offline',
      location: '温室2号东北角',
      model: 'HK-2000',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 4,
      name: '温湿度传感器1',
      type: 'sensor',
      position: [112.44871, 39.376116],
      status: 'warning',
      location: '温室2号西北角',
      model: 'DHT-22',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 5,
      name: '温湿度传感器2',
      type: 'sensor',
      position: [112.44771, 39.375116],
      status: 'online',
      location: '温室1号中心',
      model: 'DHT-22',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 6,
      name: '温湿度传感器3',
      type: 'sensor',
      position: [112.44671, 39.374116],
      status: 'online',
      location: '温室2号中心',
      model: 'DHT-22',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 7,
      name: '灌溉控制器1',
      type: 'control',
      position: [112.442187, 39.376387],
      status: 'offline',
      location: '温室3号中心',
      model: 'IC-100',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 8,
      name: '灌溉控制器2',
      type: 'control',
      position: [112.443187, 39.375387],
      status: 'online',
      location: '温室1号西南角',
      model: 'IC-100',
      lastUpdate: '2024-03-21 14:30:00'
    },
    {
      id: 9,
      name: '灌溉控制器3',
      type: 'control',
      position: [112.444187, 39.374387],
      status: 'warning',
      location: '温室2号西南角',
      model: 'IC-100',
      lastUpdate: '2024-03-21 14:30:00'
    }
  ]
}

// 获取标记点的样式
const getMarkerStyle = (device: any) => {
  const baseStyle = {
    'border-radius': '50%',
    'background-color': '#67C23A',
    'box-shadow': '0 0 20px rgba(103, 194, 58, 0.9)',
    'border': '4px solid #fff',
    'color': '#fff',
    'text-align': 'center',
    'line-height': '40px',
    'font-size': '20px',
    'opacity': '0.85',
    'width': '40px',
    'height': '40px',
    'font-weight': 'bold'
  }

  // 根据设备类型和状态设置不同的颜色
  if (device.status === 'offline') {
    baseStyle['background-color'] = '#909399'
  } else if (device.status === 'warning') {
    baseStyle['background-color'] = '#E6A23C'
  } else {
    switch (device.type) {
      case 'camera':
        baseStyle['background-color'] = '#409EFF'
        break
      case 'sensor':
        baseStyle['background-color'] = '#67C23A'
        break
      case 'control':
        baseStyle['background-color'] = '#33ffd0'
        break
    }
  }

  return baseStyle
}

// 创建标记点内容
const createMarkerContent = (device: any) => {
  const icons = {
    camera: '📹',
    sensor: '🌡️',
    control: '⚙️'
  }
  return `<div style="${Object.entries(getMarkerStyle(device))
    .map(([key, value]) => `${key}:${value}`)
    .join(';')}">${icons[device.type as keyof typeof icons]}</div>`
}

// 创建信息窗体内容
const createInfoWindowContent = (device: any) => {
  const statusText = {
    online: '在线',
    offline: '离线',
    warning: '警告'
  }

  return `
    <div class="info-window">
      <div>名称：${device.name}</div>
      <div>位置：${device.location}</div>
      <div>型号：${device.model}</div>
      <div>状态：${statusText[device.status as keyof typeof statusText]}</div>
      <div>最后更新：${device.lastUpdate}</div>
    </div>
  `
}

// 处理标记点鼠标悬停
const handleMarkerMouseover = (device: any) => {
  currentInfo.value = device
  infoWindowVisible.value = true
}

// 处理标记点鼠标移出
const handleMarkerMouseout = () => {
  infoWindowVisible.value = false
}

// 关闭信息窗体
const closeInfoWindow = () => {
  infoWindowVisible.value = false
}
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  display: none !important;
}

.overlay-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.status-info {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 4px;
  color: #33ffd0;
  backdrop-filter: blur(4px);
}

.info-item {
  display: flex;
  align-items: center;
  margin: 4px 0;
}

.info-item .label {
  margin-right: 8px;
}

.info-item .value {
  color: #67C23A;
}

.info-item .value.warning {
  color: #E6A23C;
}

:deep(.info-window) {
  padding: 12px;
  line-height: 1.8;
  font-size: 14px;
  color: #fff;
  background: rgba(18, 161, 127, 0.95);
  border-radius: 8px;
  border: 2px solid rgba(51, 255, 208, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  min-width: 200px;
}

:deep(.info-window div) {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.info-window div:last-child) {
  margin-bottom: 0;
}

:deep(.amap-info-content) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

:deep(.amap-info-sharp) {
  display: none !important;
}

:deep(.amap-info-close) {
  display: none !important;
}
</style>
